*{
  padding: 0;
  margin: 0;
}
#app{
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  .input_userInfo{
    margin-left: 10px;
    width: 18%;
    height: 250px;
    background-color: #fff;
    border-radius: 5px;
    h3{
      text-align: center;
      padding-top: 5px;
      box-sizing: border-box;
    }
    .input_container{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .item{
        margin-top: 5px;
        box-sizing: border-box;
      }
      .btn{
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-top: 5px;
        box-sizing: border-box;
        background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
        border-radius: 10px;
        box-shadow: 4px 4px 10px #000;
      }
      .btn:hover{
        cursor: pointer;
        box-shadow: 6px 6px 10px #000;
      }
    }
  }
  .card{
    position: relative;
    margin-left: 10px;
    width: 12%;
    height: 250px;
    background-color: #fff;
    border-radius: 5px;
    .content{
      width: 100%;
      height: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      text-align: left;
      .avter{
        width: 50px;
        height: 50px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      span{
        text-align: left;
        width: 90px;
      }
    }
    .detailPage{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 60%;
      width: 100%;
      z-index: 999;
      background-color: #fff;
      position: absolute;
      top: 40%;
      border-radius: 5px;
      span{
        text-align: left;
        width: 90px;
      }
      .detailBtn{
        width: 100%;
        text-align: center;
        background-color: #eee;
        height: 15%;
      }
    }
    .shangla{
      text-align: center;
      background-color: #eee;
      height: 10%;
      border-radius: 5px;
    }
  }
}










